<template>
<div class="condition-container" >
    <div id="all" :class="searchBarFixed == true ? 'isFixed' :''">
        <div class="all" >
            <ul class="firstBar">
                <li class="condition-general" data-id="0" @click="skim($event)" :class="{checked:tab==0}">最新</li>
                <li class="condition-general" data-id="1" @click="skim($event)" :class="{checked:tab==1}">收藏</li>
                <li class="condition-general" data-id="2" @click="skim($event)" :class="{checked:tab==2}">
                    价格
                    <i class="priceup" :class="{checkedup:tab==2&&!isRed}"></i>
                    <i  ref="pricedown" class="pricedown" :class="{checkeddown:tab==2&&isRed}"></i>
                </li>            
            </ul>
        </div>
        <div class="detail" >
            <ul class="secondBar">
                <li class="condition-detail" :class="{active:current==0}" id="0" @click="choose($event)">
                    <span class="view">{{appear()}}<i ref="arrow" class="arrow"></i></span>               
                </li>
                <li class="condition-detail" :class="{active:current==1}" id="1" @click="choose($event)">
                    <span class="view">{{appearLevel()}}<i ref="arrow" class="arrow"></i></span>               
                </li>
                <li class="condition-detail" :class="{active:current==2}" id="2" @click="choose($event)">
                    <span class="view">{{appearPrice()}}<i ref="arrow" class="arrow"></i></span>              
                </li>
                <li class="condition-detail" :class="{active:current==3}" id="3" @click="choose($event)">                
                    <div class="fwqstyle"><span class="view">{{appearFwq()}}<i ref="arrow" class="arrow"></i></span></div>             
                </li>
            </ul>
        </div>
    
    <div class="czxt" v-show="current==0">
        <ul class="half">
            <li class="half-cont" v-for="item in czxtList" :key="item" :class="{'activeitem':signleCzxtList.indexOf(item)>-1}" @click="option(item,signleCzxtList)">
                {{item}}<i ref="rightup" class="rightup"></i>
            </li>
        </ul>
    </div>
    <div class="dj" v-show="current==1">
        <ul class="three" >
            <li class="three-cont" v-for="item in djList" :key="item.level" :class="{'activeitem':signleDjList.indexOf(item)>-1}" @click="signle(item,signleDjList)">{{item.level}}</li>
        </ul>
    </div>

    <div class="jg clear" v-show="current==2">
        <div class="jg-input">
            <input type="tel" placeholder="请输入最低价格" class="jg-min" v-model="inputminprice">
            <div class="fgf">-</div>
            <input type="tel" placeholder="请输入最高价格" class="jg-min" v-model="inputmaxprice">
        </div>
        <ul class="three-jg" >
            <li class="three-txt" v-for="item in jgList" :key="item.price" @click="signlePrice(item, signleJgList)">{{item.price}}</li>
        </ul>       
    </div>
    <div class="fwq-out" v-show="current==3" @click="fwq">
        <div class="name">服务器</div>
        <div class="area-out">不限</div>
        <i class="toright"></i>        
    </div>
    <div class="btn"  v-show="current>=0">
            <div class="reset" @click="reset()">重置</div>
            <div class="sure" @click="headsearch()">确定</div>
    </div>
    <div class="mask"  v-show="current>=0">
    </div>
    </div>
    <div class="fwq" v-show="fwqshow">
        <div class="header" >   
            <div class="icon-back" @click="fwq"></div>        
            <div class="title">区服选择</div>       
        </div>
        <div class="area-and-server">
            <div class="area">
                <ul>
                    <li class="area-cont" v-for="(item,index) in areaList" :key="item" @click="areasignle(item,signleareaList)" @click.prevent="cur=index" :class="{on:cur==index}"><span class="area-txt">{{item}}</span></li>
                </ul>
            </div>
            <div class="server">
                <ul><li class="server-cont" v-for="item in server1List" :key="item" v-show="cur==0"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server2List" :key="item" v-show="cur==1"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server3List" :key="item" v-show="cur==2"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server4List" :key="item" v-show="cur==3"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server5List" :key="item" v-show="cur==4"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server6List" :key="item" v-show="cur==5"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server7List" :key="item" v-show="cur==6"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server8List" :key="item" v-show="cur==7"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server9List" :key="item" v-show="cur==8"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in server10List" :key="item" v-show="cur==9"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
                <ul><li class="server-cont" v-for="item in serversList" :key="item" v-show="cur==10"  @click="fwqsignle(item,signleFwqList)">{{item}}</li></ul>
            </div>
        </div>
    </div>
    <div class="content">
        <common :List="SpecificList"></common>
    </div>
    
</div>
</template>
<script>
import axios from "axios";
import Common from "@/pages/common/Common";
export default {
    name:'RolesCondition',
    data(){
        return{
            searchBarFixed:false,
            cur:0,
            fwqshow:false,
            isRed:false,
            tab:0,
            current:-1,
            inputlevel:'',
            inputmaxprice:'',
            inputminprice:'',
            optionsList:["操作系统","等级","评分","价格(元)"],
            czxtList:["ios平台","安卓平台"],
            djList:[{level:"69级",minlevel:69,maxlevel:69,betweenlevel:"69~69"},
            {level:"70-89级",minlevel:70,maxlevel:89,betweenlevel:"70~89"},
            {level:"90-119级",minlevel:90,maxlevel:119,betweenlevel:"90~119"}],
            jgList:[
             {price:"61-499",minprice:61,maxprice:499},
             {price:"500-999",minprice:500,maxprice:999},
             {price:"1000-1999",minprice:1000,maxprice:1999},
             {price:"2000-2999",minprice:2000,maxprice:2999},
             {price:"3000-3999",minprice:3000,maxprice:3999},
             {price:"4000-4999",minprice:4000,maxprice:4999},
             {price:"5000以上",minprice:5000,maxprice:1500000}
            ],
            areaList:["一区","二区","三区","四区","五区","六区","七区","八区","九区","十区","双平台"],
            server1List:["紫禁之巅","梦回唐朝","天下无双","紫气东来","开辟鸿蒙","华夏","黄金时代","群星璀璨","海纳百川","物华天宝","四海升平",
            "花好月圆","锦绣前程","鹏程万里","一帆风顺","高山流水","江山如画","八仙过海","五谷丰登","缘定三生"],
            server2List:["长安城","东海湾","长寿村","大唐国境","瑶池圣地","宝象国","西梁女国","女娲神迹","小雷音寺","麒麟山","墨家村",
            "花果山","点石成金","子母河","梦回奔日","梦回望月","身似菩提","心如明镜","慈航普度","白露为霜"],
            server3List:["飞龙在天","五虎断魂","四法青云","霜冷九州","紫电青霜","秋水落霞","狂澜碎岳","晓风残月","碧海潮生","庄周梦蝶","回风舞雪",
            "太极流光","日月乾坤","横扫千军","红袖添香","雷霆万钧","龙啸在天","含情脉脉","三味真火","杨枝甘露"],
            server4List:["烟雨江南","气贯长虹","追星踏月","平步青云","百里挑一","壮志凌云","长乐未央","天龙破城","肝胆相照","众志成城","金戈铁马",
            "龙腾虎跃","百花齐放","日新月异","功成名就","登峰造极","吉祥如意","名扬四海","十方无敌","斗转星移"],
            server5List:["钓鱼岛","长白山","沂水雪山","世界之窗","兰亭序","潇湘夜雨","吉祥谷","珍宝阁","城隍庙","逍遥津","九华山",
            "百花村","朱紫坊","齐云楼","流花湖","云梦泽","燕赵风云","钱塘江"],
            server6List:["姑苏城","西樵山","赤壁古城","太和殿","天福楼","文殊院","灵隐寺","凌云殿","彩云之南","雨花台","山海关",
            "沉香阁","紫塞明珠","金榜题名","玉龙雪山","可可西里","白鹿原","红叶谷","香蜜湖","剑门关"],
            server7List:["傲视群雄","千秋万代","气势磅礴","唯我独尊","无与伦比","九天揽月","叱咤风云","君临天下","万里挑一","顶天立地","风华正茂",
            "少年英雄","七月流火","朝气蓬勃","才华横溢","百家争鸣","浩然正气","星火燎原","仙履奇缘","天外飞仙"],
            server8List:["仗剑天涯","琴瑟和鸣","碧霞满空","威震八方","开创未来","吹角连营","云销雨霁","春风送暖","魂牵梦萦","红尘缥缈","沧海桑田",
            "势如破竹","富甲天下","红颜知己","光辉岁月","谁与争锋","一生所爱","火树银花","浮生如梦","繁花似锦"],
            server9List:["后起之秀","镜花水月","胜友如云","空谷幽兰","白驹过隙","因缘际会","大江东去","瑞雪纷飞","大唐盛世","孤帆远影","雕栏玉砌",
            "四季平安","月落乌啼","飞鸿踏雪","明眸善睐","龙飞凤舞","一鸣惊人","四海一家","八宝生辉","朝阳鸣凤"],
            server10List:["天下皆春","岁序更新","迎春纳新","喜气盈门","吉星高照","锦绣山河","一元复始","福寿康宁","繁荣昌盛","春和景明","草长莺飞",
            "莺歌燕舞","春风得意","合家团圆","锦上添花","春风和气","人间芳菲","风月无边","烟柳如画","清风自在"],
            serversList:["时空之隙","心意相通","携手逐梦","宛如初见","皓月千里","四海九州","夏日香气","相见恨晚","致青春","逍遥游","幸福群像",
            "那时花开","风样自由","对月歌","此生不换","海之彼端","三生情缘","少年无畏","一战倾城","似水年华","秋声赋","流萤灯","风之痕","落花清寒","琉璃城","雪之歌","河洛天工","两心相知","咕噜咕噜","洛阳匠心","冬日恋曲",
            "三生有幸","十年一梦","花与少年","双面伊人","愿闻花名","风起之时","2018","暖暖柔光","灿烂千阳"],
            signleCzxtList:[],
            signleDjList:[],
            signleJgList:[],
            signleFwqList:[],
            signleareaList:[],
            SpecificList:[]

          
        }
    },
    components: {
      Common
    },
    methods:{
        handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            var offsetTop = document.querySelector('#all').offsetTop
            if (scrollTop > offsetTop) {
                this.searchBarFixed = true
            } else {
                this.searchBarFixed = false
            }
            // console.log(scrollTop,offsetTop)
        },
        skim(e){
                let tabid=e.target.dataset.id
                this.tab=tabid
                if(this.tab==2){
                    this.isRed=!this.isRed
                }
                this.search();
         
        },
        choose(e){                                    
            if(this.current==-1){
                let curid=e.currentTarget.id
                this.current=curid
            }else{
                this.current=-1
            }
        },
        option(item, checkedList){
            let arrIndex=checkedList.indexOf(item);
            if(arrIndex>-1){
           checkedList.splice(arrIndex,1)
            }else{      
           checkedList.push(item)   
           
            }
               
        },
        signle(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);  
                   this.inputlevel=item.betweenlevel;         
            }

        },
        signlePrice(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            this.inputminprice='';
            this.inputmaxprice='';
            if(arrIndex==-1){
                signleList.push(item);   
                this.inputminprice=item.minprice;  
                this.inputmaxprice=item.maxprice;     
            }
        },
        show(point,name,midValue,maxValue){
            if(point>maxValue)
            {
                this.point=maxValue;
            }
            if(point<=0){
                return  ''
            }else if(point<=midValue){
                return  name+'≥'+midValue
            }else if(point<maxValue){
                return  name+'≥'+point
            }else{
                return  name+'≥'+maxValue
            }
        },
        appear(){
                if(this.signleCzxtList.length>0){
                return this.signleCzxtList.join(',')
                }else{
                return "操作系统"
                }            
            
        },
        appearLevel(){
            if(this.signleDjList.length>0){
                return this.inputlevel;
                }else{
                return "等级"
                }    
        },
        appearPrice(){
            if(this.signleJgList.length>0){
                return this.inputminprice+'~'+this.inputmaxprice
                }else{
                return "价格(元)"
                }    
        },
        appearFwq(){
            if(this.signleFwqList.length>0){
                return this.signleareaList+'    '+this.signleFwqList
                }else{
                return "服务器"
                }   

        },
        areasignle(item, signleList){
            
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);   
                    
            }

        },
        fwq(){
            this.fwqshow=!this.fwqshow
  
        },
        fwqsignle(item, signleList){
            let arrIndex=signleList.indexOf(item);
            signleList.splice(0,signleList.length);
            if(arrIndex==-1){
                signleList.push(item);                 
            }
             this.fwqshow=false;   
        },
        reset(){
            this.signleCzxtList.splice(0,this.signleCzxtList.length);
            this.signleDjList.splice(0,this.signleDjList.length);
            this.signleFwqList.splice(0,this.signleFwqList.length);  
            this.signleareaList.splice(0,this.signleareaList.length);               
            this.inputmaxprice='',
            this.inputminprice=''

        },
        headsearch(){
            //隐藏
            this.search();
            this.current=-1
        },
        search(){
                var param={type:this.$route.query.type};

                //操作系统
                if(this.signleCzxtList&&this.signleCzxtList.length>0){
                    var czxt=[];
                    for(var i=0;i<this.signleCzxtList.length;i++){
                        if(this.signleCzxtList[i]=="ios平台"){
                            czxt.push("ios");
                        }
                        else if(this.signleCzxtList[i]=="安卓平台"){
                            czxt.push("android");
                        }
                    }
                    param.czxq=czxt;
                }
                //等级
                if(this.signleDjList&&this.signleDjList.length>0){
                    param.zddj=parseInt(this.signleDjList[0].minlevel) ;
                    param.zgdj=parseInt(this.signleDjList[0].maxlevel);
                }
                //价格
                if(this.inputmaxprice){
                     param.zgjg=parseInt(this.inputmaxprice);
                }
                if(this.inputminprice){
                     param.zdjg=parseInt(this.inputminprice);
                }
                //服务器
                if(this.signleareaList){
                    param.dq=this.signleareaList[0]
                }                
                if(this.signleFwqList){
                    param.xq=this.signleFwqList[0]
                }
                //排序
                if(this.tab==0){
                   param.orderby="zx";
                } else if(this.tab==1){
                    param.orderby="sc";

                }else if(this.tab==2){
                    param.orderby="jg";
                }
                //是否逆序 isRed为true时上三角红色
                param.isdesc=this.isRed;

                console.dir(param);
            axios.post("http://81.68.253.206:8081/page/getShopRoleList",
            param,
            {
                headers: {
                'token': localStorage.getItem("UserToken") }
            } 
        ).then(res=>{
        if(res.data&&res.data.data&&res.data.status){
            this.SpecificList=res.data.data;
        }
        
    })
        }
    },
    mounted(){
         window.addEventListener('scroll', this.handleScroll)
        this.search();
    },
    destroyed () {
        window.removeEventListener('scroll', this.handleScroll)
    },


    

    
}
</script>
<style lang="scss" scoped>
.condition-container{
    width: 100%;
    .all{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        text-align: center;
        font-size: rem(40);
        .firstBar{
            display: flex;   
            height: rem(130);
            .checked{
                    color:#e74e4b!important;
                }
            
            .condition-general{
                position: relative;
                float: left;
                    flex: 1;
                .checkeddown{
                    border-top-color: #e74e4b!important;
                }
                .checkedup{
                    border-top-color: #e74e4b!important;
                }
                .priceup{
                    position: absolute;
                    display: inline-block;
                    top: rem(45);
                    margin-left: rem(20);
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(15) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #ccc;
                    margin-left: rem(10);
                    transform: rotate(180deg);
                }
                .pricedown{
                    display: inline-block;
                    position: absolute;
                    top: rem(70);
                    margin-left: rem(20);
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(15) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #ccc;
                    margin-left: rem(10);

                }
            }
        }
        
    }
    .detail{
        width: 100%;
        height: rem(150);
        line-height: rem(150);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        text-align: center;
        font-size: rem(40);
        .secondBar{
             width: 100%;
            display: flex;
            padding:rem(30) 0 rem(10) 0;
            border-bottom: 1px solid #f5f5f5;
            .active{
            background-color: #fff!important;
            color: #e74e4b;
            border: 1px solid #f5f5f5;
            border-bottom: 0;
            height: rem(135)!important;
            padding-bottom: rem(30);

            .arrow{
                    border-top-color: #e74e4b!important;
                    transform: rotate(180deg);
                }
            }
            .condition-detail{
                flex: 1;
                white-space: nowrap;
                height: rem(100);
                line-height: rem(100);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
                
                .fwqstyle{
                width: rem(320);
                height: rem(100);
                line-height: rem(100);
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                white-space: nowrap

                }

                .arrow{
                    display: inline-block;
                    width: 0;
                    height: 0;
                    -webkit-border-radius: rem(5);
                    -moz-border-radius: rem(5);
                    border-radius: rem(5);
                    border-style: solid;
                    border-width: rem(12) rem(12) 0;
                    border-color: transparent;
                    border-top-color: #555;
                    margin-left: rem(10);
                    vertical-align: middle;
                }
            }
            li:first-child{
                margin-left: rem(30);
            }
        }

    }
    .czxt{
        width: 100%;
        height: rem(190);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        .half{
            width: 100%;
            display: flex;
            padding:rem(30) 0;
            .half-cont{
                flex: 1;
                 padding:0 rem(20) ;
                 white-space: nowrap;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
            }
            li:first-child{
                margin-left: rem(30);
            }

        }
        
    }
    .dj{
        width: 100%;
        height: rem(190);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        .three{
            display: flex;
            width: 100%;
             padding:rem(30) 0;
             .three-cont{
                flex: 1;
                padding:0 rem(20) ;
                white-space: nowrap;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: rem(30);
                border-radius: rem(15);
             }
              li:first-child{
                margin-left: rem(30);
            }

        }

    }    
    .jg{
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        font-size: rem(40);
        text-align: center;
        
        .jg-input{
            display: flex;
            width: 100%;
            margin-top: rem(30);
            .fgf{
                width: rem(30);
                 height: rem(100);
                line-height: rem(100);
            }
            .jg-min{
                flex: 1;
                float: left;
                height: rem(100);
                line-height: rem(100);
                outline:none;
                border-radius: rem(15);
                border: 1px solid #ccc;
                font-size: rem(40);
                padding-left:rem(30) ;
            }
            input::-webkit-input-placeholder{
                     color: #CCC;
                }
            input:first-child{
                margin-left: 2%;
            }
            input:last-child{
                margin-right: 2%;
            }
        }

        .three-jg{
             padding:rem(30) 0;
            
            .three-txt{
                width: 30.6%;
                float: left;
                height: rem(120);
                line-height: rem(120);
                background-color: #f5f5f5;
                margin-right: 2%;
                border-radius: rem(15);
                margin-bottom: rem(30);
            }
            li:nth-child(3n+1){
                margin-left: 2%;
            }
        }
    }
    .fwq-out{
        position: relative;
        display: flex;
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        background-color: #fff;
        border-top: 1px solid #f5f5f5;
        padding: 0 rem(30);
        font-size: rem(42);
        cursor: pointer;
        .name{
            flex: 1;
            font-weight: 700;
        }
        .area-out{
            flex: 1;
            text-align: right;
            margin-right: rem(60);
        }
        .toright{
            position:absolute;
            top: rem(40);
            right: rem(30);
            width: rem(50);
            height:rem(50);
            background: url(../../../assets/imgs/toright.svg) no-repeat 50% 50%;
            background-size: 100% 100%;
        }
    }
}
.btn{
    display: flex;
    width: 100%;
    height: rem(140);
    line-height: rem(140);
    border-top: 1px solid #f5f5f5;
    font-size: rem(45);
    text-align: center;
    z-index: 2;
     .reset{
    flex: 1;
    background-color: #fff;
    }
    .sure{
        flex: 2;
        color: #fff;
        background-color: #e74e4b;
    }
}   
.mask{
    position: fixed;
    left: 0;
    right: 0;
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    min-height: -webkit-fill-available;
    background: rgba(0,0,0,.3);
    z-index: 1;
}
.activeitem{
    position: relative;
        color:#e74e4b;
        background-color:#fff!important; 
        border: 1px solid #e74e4b;

    .rightup{
        width: rem(60);
        height: rem(40);
        position: absolute;
        top: 0;
        right: rem(-5);
        background: url(../../../assets/imgs/rightup.svg) no-repeat 50% 50%;
        background-size: 100% 100%;
        border-radius:0 rem(15) 0 0 ;
    }
}                  
.fwq{ 
    position: fixed;
    top: 0;
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
    .area-and-server{
        margin-top: rem(130);
        margin-bottom: rem(130);
        width: 100%;
         height: 100%;
        .area{
            float: left;
            width: 40%;
            height: rem(1200);
            overflow-y: auto;
            .area-cont{
                width: 100%;
                height: rem(130);
                line-height: rem(130);
                font-size: rem(42);
                .area-txt{
                    width: auto;
                    margin-left: rem(40);
                }
           

            }
            .on{
                background-color: #f5f5f5;
                color: #e74e4b;
            }
        }
        .server{
            float: left;
            width: 60%;
            height: rem(1200);
          
            padding: 0 rem(30);
            overflow:auto;
            .server-cont{
                width: 100%;
                height: rem(130);
                line-height: rem(130);
                font-size: rem(42);
                border-top: 1px solid #f5f5f5;
            }

        }
    }
}
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    
    .icon-back{
        position: absolute;
        top: rem(40);
        left: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../assets/imgs/back.svg) no-repeat 50% 50%;
        background-size: auto 100%;
        cursor: pointer;
    }
}
.content{
    width: 100%;
    margin-top: rem(12);
    background-color: #fff;
    padding: 0 rem(30);
} 
.isFixed{
    position:fixed;
    top: rem(130);
    width: 100%;
    z-index: 99;
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
}
.clear{clear:both;}


</style>